<script setup>
import chatInterface_setup from './chatInterface_setup.vue'
import mainstay from './mainstay.vue'
import { useLoginStore } from '@/stores/login';
import { onMounted } from 'vue';
import { userId } from "@/stores/user"
import { mainPage } from '@/stores/page'
import friendApply from '../toggleInterface/friendApply.vue'
import empty from './empty.vue'
import { useRouter } from  'vue-router'
import  circleOfFriends  from '../toggleInterface/circleOfFriends.vue';
const loginStore = useLoginStore();
const router = useRouter();

onMounted (() => {
    loginStore.connection();
    if(sessionStorage.getItem('user') === null){
        router.push('/loginInterface');
    }
})

</script>

<template>
  
  
  
<!-- 整体页面布局 -->

<div class="common-layout">
   <el-container>

    <!-- 左侧栏 -->
    <el-aside style="width: 4vw; ">
        <chatInterface_setup style="width:4vw; border : solid 1px; position : fixed;"></chatInterface_setup>
    </el-aside>
    <!-- 主体内容 -->
    <el-main style="width: 96vw;">
        <div v-if="mainPage === 0">
            <empty></empty>
        </div>
        <div v-if="mainPage === 1">
        <mainstay></mainstay>
    </div>
    <div v-else-if="mainPage === 2">
        <friendApply :userId="userId"></friendApply>
    </div>
    <div v-else-if="mainPage === 3" >
        <circleOfFriends></circleOfFriends>
    </div>
    </el-main>
  </el-container>
</div>

  
    
</template>

<style scoped>
    @import '../../css/chatInterface.css';
</style>